<template>
  <div>
    <div class="login-container">
      <!--头部区域-->
      <h2 class="login-title">企业员工日常管理系统 </h2>
      <!--表单区域-->
      <van-form @submit="onSubmit">
        <span class="login-lable"></span>
        <van-field class="van-cell"
         v-model="username"
         name="username"
         label="账号"
         left-icon="user-o"
         placeholder="请输入账号"
         :rules="[{ required: true, message: '请输入账号' }]"
        />
        <span class="login-lable"></span>
        <van-field
          v-model="password"
          type="password"
          name="password"
          left-icon="bag-o"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <div class="footer">
          <van-checkbox style="float:left;width:50%" icon-size="12px" v-model="re_password" shape="square">
            <span>记住密码</span></van-checkbox>
          <span style="float:right;margin-right:20px" @click="forget">忘记密码?</span>
        </div>
        <div style="margin: 16px;margin-top: 60px;">
          <van-button block type="info" native-type="submit">
            登陆
          </van-button>
        </div>
      </van-form>
      <!--登陆-->
      <div class="login-footer">
        <span>没有账户?</span>
        <span style="color:#1989fa;" @click="goRegister" >立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex';
  import account from "@/api/account";
  import util from '@/libs/util';
  export default {
    data() {
      return {
        username: '',
        password: '',
        re_password: false,
        // props:{
        //   title:String,
        // },
      };
    },
    methods: {
      ...mapActions('admin/account', [
        'login'
      ]),

/*      onSubmit (values) {
        const username = this.username;
        const password = this.password;
        loginSuccess(data){
          // dispatch采用Promise链式调用
          this.$store.dispatch('login', data).then(() => {
            if(backlink)
            {
              that.$router.push(backlink);
            }
            else{
              that.$router.go(-1);
            }
          })

          this.login({
            username,
            password
          })
            .then(() => {
              // 重定向对象不存在则返回顶层路径
              this.$router.replace(this.$route.query.redirect || '/');
            });
      },*/
      //表单验证
      onSubmit(values) {
        account.AccountLogin({
          username:this.username,
          password :this.password,
        })
          .then(res => {
            // 返回数据
            util.cookies.set('uuid', res.userInfo.userId);
            util.cookies.set('token', res.token);
            util.cookies.set('userInfo', res.userInfo);
            //保存用户信息
            this.$store.dispatch("login",res.userInfo);
            this.$router.push({path: '/index'})

            // 重定向对象不存在则返回顶层路径
            // this.$router.replace(this.$route.query.redirect || '/index');
          })
          .catch(err => {
            // 异常情况
          })

      },
      goRegister() {
        this.$router.push({path: '/register'})
      },
      forget() {
        this.$router.push({path: '/forget'})

      },

    }
  }
</script>

<style scoped>
  .login-container {
    padding: 0 20px;
  }

  .login-title {
    margin-bottom: 80px;
    margin-top: 120px;
  }

  .van-cell {
    padding-left: 0px;
  }

  .login-lable {
    /*margin-left: 1px;*/
    margin-right: 80%;
    margin-top: 20px;
    display: block;
    font-size: 16px;
    font-weight: bolder;
  }

  .footer {
    font-size: 12px;
    color: rgb(164, 151, 179);
    margin-top: 15px;
    margin-left: 15px;
  }

  .login-footer {
    font-size: 12px;
    color: rgb(164, 151, 179);
    text-align: right;
    padding-right: 20px;
  }
</style>
